<template>
    <div class="community-static">
        <div class="activity-detail">
            <div class="activity-title">
                <div class="title">
                    {{ activityInfo.activity_name }}
                    <div
                        :class="
                            activityInfo.activity_status == 2
                                ? 'activity-status'
                                : 'activity-status activity-status-end'
                        ">
                        {{ activityInfo.activity_status_name }}
                    </div>
                </div>
                <div class="btn-list">
                    <div v-for="(item, index) in btnList" :key="index">
                        <div v-show="item.status.includes(activityInfo.activity_status)">
                            <el-button
                                v-auth="`${item.authCode}`"
                                class="btn-detail"
                                plain
                                @click="handleBtn(item.id)"
                                >{{ item.val }}</el-button
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="activity-text">
                <div v-for="(item, index) in activityText" :key="index" class="text-title">
                    <div v-if="item.content == 'begin_date'">
                        {{ item.name }}
                        <span v-if="activityInfo.period_type == 1" class="text-content">永久</span>
                        <span v-else class="text-content">{{
                            activityInfo[item.content] + ' 至 ' + activityInfo.end_date
                        }}</span>
                    </div>
                    <div v-else>
                        {{ item.name }}<span class="text-content">{{ activityInfo[item.content] || '--' }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="activity-statictics">
            <div class="activity-header">
                <span class="activity-tips">数据实时更新，有1-2分钟延迟</span>
                <el-tabs v-model="activeName">
                    <el-tab-pane v-for="(val, key) in tabList" :key="key" :label="val" :name="key"> </el-tab-pane>
                </el-tabs>
            </div>
            <component :is="componentId" :key="activeName"></component>
        </div>
        <!---推广弹窗-->
        <PlugDialog :id="activity_id" v-model="plugShow" />
    </div>
</template>
<script lang="tsx" setup>
import { ref, reactive, computed, onMounted, defineAsyncComponent, markRaw } from 'vue';
import { getBaseInfo, punchCardOver } from '@/api/smartMarketing/community/communityCheckIn';
import PlugDialog from '../PlugDialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { WarningFilled } from '@element-plus/icons-vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const activity_id = ref(); // 活动id
const btnList = reactive([
    { id: 0, val: '编辑', status: [2], authCode: 'DATA_EDIT' },
    { id: 1, val: '查看', status: [2, 3], authCode: 'DATA_LOOK' },
    { id: 2, val: '结束', status: [2], authCode: 'DATA_END' },
    { id: 3, val: '推广', status: [2], authCode: 'DATA_PLUG' }
]);
const activityText = reactive([
    { id: 0, name: '活动期限：', content: 'begin_date' },
    { id: 1, name: '打卡口令：', content: 'clock_password' },
    { id: 2, name: '创建时间：', content: 'created_at' },
    { id: 3, name: '创建人：', content: 'created_name' },
    { id: 4, name: '更新时间：', content: 'updated_at' },
    { id: 5, name: '更新人：', content: 'updated_name' }
]);
const activityInfo = ref({});
/**
 * 推广弹框：true-展示 false-关闭
 */
const plugShow = ref<boolean>(false);

const activeName = ref('groups');
const tabList = reactive({
    groups: '参与群明细',
    records: '奖励发放记录'
});
const components = reactive({
    groups: defineAsyncComponent(() => import('./components/group.vue')),
    records: defineAsyncComponent(() => import('./components/records.vue'))
});
const componentId = computed(() => {
    return components[activeName.value];
});
/**
 * 前往详情页
 * @param type edit-编辑, look-查看
 * @param val 活动数据
 */
const onDetail = (type: string) => {
    router.push({
        path: '/smartMarketing/community/communityCheckIn/detail',
        query: { type: type, id: activity_id.value }
    });
};

/**
 * 结束
 */
const onEnd = async (val: any) => {
    await ElMessageBox.confirm('确定要提前结束此活动吗？', '提示', {
        customClass: 'community-checkin-msg-box-confirm',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        icon: markRaw(WarningFilled)
    });
    await punchCardOver({ activity_id: activity_id.value });
    getInfo();
    ElMessage.success('提前结束成功');
};
/**
 * 操作按钮
 * @param id 0-编辑 1-查看 2-结束 3-推广
 */
const handleBtn = (id: any) => {
    switch (id) {
        case 0: // 编辑
            onDetail('edit');
            break;
        case 1: // 查看
            onDetail('look');
            break;
        case 2: // 结束
            onEnd();
            break;
        case 3: // 推广
            plugShow.value = true;
            break;
    }
};
/**
 * 获取参与活动基础信息
 * @param val 活动id
 */
const getInfo = async () => {
    const res = await getBaseInfo({ activity_id: activity_id.value });
    if (!res.activity_id) {
        ElMessage.error('活动已删除');
        router.push('/smartMarketing/community/communityCheckIn');
    } else {
        activityInfo.value = res;
    }
};
onMounted(() => {
    activity_id.value = route.query.activity_id;
    getInfo();
});
</script>
<style src="./index.scss" lang="scss" scoped></style>
